<template>
	<el-button class="fx-button" :class="classes"  @click="onClick">
		<slot></slot>
	</el-button>
</template>
<script>
/**
 * fx-button by shang 2020/2/25
 * @desc fx-button 业务按钮
 * @params type[string] 按钮类型, 为了统一规范业务按钮颜色, 声明按钮类型 方便使用 可选 save, submit, return, check, uncheck, recheck, unrecheck
 */
export default {
	name: 'fx-button',
	props: {
		type: {
			type: String,
			default: 'save'
		},
		size: {
			type: String,
			default: 'small'
		},
		stop: Boolean
	},
	computed: {
		classes () {
			return [`fx-button--${this.type} el-button--${this.size}`]
		}
	},
	methods: {
		onClick (e) {
			if (this.stop) {
				event.stopPropagation()
			}
			this.$emit('click', e)
		}
	}
}
</script>
<style lang="stylus" scoped>
@import '~$assets/stylus/varsty.styl'
.fx-button {
	color: #fff
    // border-color: #7A9DB3
    // background-color: #7A9DB3
	&:active {
		opacity: .4
	}
	&--save {
		border-color: $fxBlue1
		background-color: $fxBlue1
		&:hover {
			border-color: $fxLightBlue1
			background-color: $fxLightBlue1
		}
	}
	&--submit {
		border-color: $fxPuce
		background-color: $fxPuce
		&:hover {
			border-color: $fxLightPuce
			background-color: $fxLightPuce
		}
	}
	&--return {
		border-color: $fxPink
		background-color: $fxPink
		&:hover {
			border-color: $fxLightPink
			background-color: $fxLightPink
		}
	}
	&--check {
		border-color: $fxViolet1
		background-color: $fxViolet1
		&:hover {
			border-color: $fxLightViolet1
			background-color: $fxLightViolet1
		}
	}
	&--more {
		border-color: $fxPurple
		background-color: $fxPurple
		&:hover {
			border-color: $fxLightViolet1
			background-color: $fxLightViolet1
		}
	}
	&--uncheck {
		border-color: $fxGreen3
		background-color: $fxGreen3
		&:hover {
			border-color: $fxLightGreen3
			background-color: $fxLightGreen3
		}
	}
	&--recheck {
		border-color: $fxBlue2
		background-color: $fxBlue2
		&:hover {
			border-color: $fxLightBlue2
			background-color: $fxLightBlue2
		}
	}
	&--unrecheck {
		border-color: $fxRed3
		background-color: $fxRed3
		&:hover {
			border-color: $fxLightRed3
			background-color: $fxLightRed3
		}
	}
}
</style>

